<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书签</title>
  <style>
    .tip {
      background: #959595;
      color: wheat;
      padding: 5px;
      margin: 0;
      margin-bottom: 2px;
      word-break: break-all;
      min-height: 22px;
    }

    .folder {
      background: #e5e3ca;
      display: flex;
      padding: 12px 8px;
      align-items: center;
      color: black;
      font-size: 18px;
      border-bottom: 1px solid #f3f2f1;
      position: relative;
    }

    .link {
      /* background: #91d8d3; */
      display: flex;
      padding: 12px 8px;
      align-items: center;
      color: black;
      font-size: 18px;
      border-bottom: 1px solid #bebebe;
      position: relative;
    }

    .zz {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
    }

    .img {
      max-width: 26px;
      margin-right: 10px;
      width: 26px;
      height: 26px;
    }
  </style>
</head>

<body style="background: #e9e9e9; margin: 0; padding: 0; position: relative;">

  <div id="folderDir" onclick="folderFn(event)">
    <!-- <div class="folder">
      <img class="img" src="../images/folder.svg">
      <div>视频1</div>
    </div> -->
  </div>

</body>
<script src='./js/giteeApi.js'></script>
<script src='./js/config.js'></script>
<script src="./js/local.js"></script>
<script>

  /* 初始化 -  获取仓库中的所有文件 */
  function getlist(path = 'bookmarks/', ref = 'master') {
    let than = this;

    geteeApi.Repositories.contents({ path: 'bookmarks' })
      .then(function ({ data }) {
        // console.log(data);
        addFiles(data);
      })
      .catch(function (error) { console.log(error); });
  }

  /* 初始化 - 显示仓库中的所有文件 */
  function addFiles(arr) {
    clear()
    arr.forEach(element => {
      var div = document.createElement("div");
      div.setAttribute('class', 'folder')
      div.setAttribute('data-name', element.name);
      div.setAttribute('data-path', element.path);
      div.innerHTML = ` <img class="img" src="./images/folder.svg"/> 
            <div >${element.name}</div>
            <div class="zz" data-name="${element.name}" data-path="${element.path}"></div>`
      document.getElementById("folderDir").appendChild(div)
    });
  }

  /* 点击文件夹事件 */
  function folderFn(event) {
    let { target } = event
    let path = target.getAttribute('data-path')
    let name = target.getAttribute('data-name')
    db.setData('filePath', path);
    db.setData('fileName', name);
    location = './bookmarks.html'
  }

  /* 删除现有的选项 */
  function clear() {
    document.getElementById('folderDir').innerHTML = ''
  }

  getlist()

</script>

</html>